<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>登录页面</title>
	<link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.table_img {
			height: 80px;
			width: 80px;
			border-radius: 80px;
		}

		.container {
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 8px;
			margin-top: 150px;
			width: 400px;
		}

		a {
			color: #fff;
		}

		a:hover {
			color: #CCC;
			text-decoration: none;
		}

		.checkbox {
			text-align: center;
		}
	</style>

</head>

<body style="background-image: url(img/bg_c.jpg);">
	<div class="container" id="app">
		<div class="row" align="center" style="padding-bottom: 26px;">
			<div style="width: 90%; margin: 10px auto;">
				<p>
					<font size="6" color="white">Hello,欢迎回来!</font>
				</p>
			</div>
			<div class="col-xs-4 col-lg-offset-4">
				<div class="table_img" style="background-color: #fff;">
					<img :src="uimage" id="table_img" class="table_img" />
				</div>
			</div>
		</div>
		<div class="row" style="padding-bottom: 10px;">
			<div style="width: 90%; margin: 10px auto;" @keyup.enter="login()">
				<div class="form-group">
					<input type="text" v-model="user.username" @change="getImg()" class="form-control" placeholder="账号/手机">
				</div>
				<div class="form-group">
					<input type="password" v-model="user.password" class="form-control" placeholder="密码">
				</div>
				<button type="button" class="btn btn-info" @click="login()" style="width: 100%;">登陆</button>
				<div class="form-group checkbox">
					<font size="3" color="red" v-text="msg"></font><br />
					<a href="register.html">
						<font size="3">没有账号?点击注册</font>
					</a>
				</div>
			</div>
		</div>
	</div>
</body>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/request.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var defaulimg = "picture/default.png";
	new Vue({
		el: "#app",
		data: {
			user: {
				username: "",
				password: ""
			},
			msg: "",
			uimage: defaulimg
		},
		created() {
			//清除登陆信息
			localStorage.removeItem("token");
			localStorage.removeItem("id");
		},
		methods: {
			//根据用户名获取头像
			getImg() {
				//判断username是否为空
				if (this.user.username) {
					//调用api请求
					getUimage(this.user.username).then(res => {
						if (res.data.errno == 0) {
							//修改头像图片
							this.uimage = res.data.data;
						} else {
							//恢复默认头像
							this.uimage = defaulimg;
						}
					})
				} else {
					this.uimage = defaulimg;
				}


			},
			login() {

				this.msg = "";
				// TODO校验

				//登陆
				login(this.user).then(res => {
					//登陆失败,打印提示信息
					if (res.data.errno == 0) {
						//登陆成功
						//保存token
						localStorage.setItem("token", res.data.token);
						localStorage.setItem("id", res.data.id);
						//跳转页面
						location.href = "home.html";
					} else {
						this.msg = res.data.errmsg;
					}
				});

			}
		},
	});
</script>

</html>